<template>
  <div class="protection-tips-container">
    <div class="page-header">
      <h1 class="page-title">文物保护小贴士</h1>
      <p class="page-description">了解如何正确参观文物古迹，共同保护北京文化遗产</p>
    </div>

    <div class="tips-section">
      <el-row :gutter="30">
        <el-col :xs="24" :lg="16">
          <div class="main-tips">
            <el-card class="tips-card" v-for="(tip, index) in mainTips" :key="index">
              <div class="tip-content">
                <div class="tip-icon">
                  <el-icon><component :is="tip.icon" /></el-icon>
                </div>
                <div class="tip-text">
                  <h3>{{ tip.title }}</h3>
                  <p>{{ tip.description }}</p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        
        <el-col :xs="24" :lg="8">
          <el-card class="side-card">
            <template #header>
              <div class="card-header">
                <h2>文物保护小知识</h2>
              </div>
            </template>
            
            <el-collapse accordion>
              <el-collapse-item v-for="(item, index) in knowledgeItems" :key="index" :title="item.title">
                <div>{{ item.content }}</div>
              </el-collapse-item>
            </el-collapse>
          </el-card>
          
          <el-card class="side-card protection-resources">
            <template #header>
              <div class="card-header">
                <h2>保护资源</h2>
              </div>
            </template>
            
            <ul class="resource-list">
              <li v-for="(resource, index) in resources" :key="index">
                <el-icon><Document /></el-icon>
                <span>{{ resource }}</span>
              </li>
            </ul>
            
            <el-button type="primary" class="beijing-button full-width">下载保护手册</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="do-dont-section">
      <h2 class="section-title">参观文物古迹的"宜"与"忌"</h2>
      
      <el-row :gutter="30">
        <el-col :xs="24" :md="12">
          <el-card class="do-card">
            <template #header>
              <div class="card-header">
                <h3><el-icon><Check /></el-icon> 宜做事项</h3>
              </div>
            </template>
            
            <ul class="do-list">
              <li v-for="(item, index) in doList" :key="index">
                {{ item }}
              </li>
            </ul>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :md="12">
          <el-card class="dont-card">
            <template #header>
              <div class="card-header">
                <h3><el-icon><Close /></el-icon> 忌做事项</h3>
              </div>
            </template>
            
            <ul class="dont-list">
              <li v-for="(item, index) in dontList" :key="index">
                {{ item }}
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { 
  InfoFilled, 
  Warning, 
  Camera, 
  Mute, 
  Umbrella, 
  Brush, 
  Document,
  Check,
  Close
} from '@element-plus/icons-vue'

const mainTips = [
  {
    icon: 'Camera',
    title: '正确拍照',
    description: '参观博物馆和文物古迹时，请注意遵守拍照规定。有些展品可能禁止拍照，特别是使用闪光灯可能会对文物造成损害。'
  },
  {
    icon: 'Mute',
    title: '保持安静',
    description: '在文物古迹和博物馆内请保持安静，不要大声喧哗，以免打扰其他参观者，也是对文化遗产的尊重。'
  },
  {
    icon: 'Warning',
    title: '不触摸文物',
    description: '请勿触摸展品和文物表面，人体皮肤的油脂和汗液会对文物造成不可逆的损害，特别是对于古代绘画和纺织品。'
  },
  {
    icon: 'Umbrella',
    title: '天气注意',
    description: '参观室外文物古迹时，请注意天气情况。雨天请勿在石质文物上使用雨伞敲打或摩擦，以免造成损伤。'
  },
  {
    icon: 'Brush',
    title: '不在文物上涂写',
    description: '请勿在任何文物古迹上刻字、涂鸦或留下任何标记，这是对文化遗产的严重破坏，也是违法行为。'
  }
]

const knowledgeItems = [
  {
    title: '为什么不能触摸文物？',
    content: '人体皮肤会分泌油脂和汗液，这些物质会与文物表面发生化学反应，导致文物表面变色、腐蚀或加速老化。特别是对于金属、纸质、纺织品等材质的文物，影响更为严重。'
  },
  {
    title: '闪光灯为何对文物有害？',
    content: '闪光灯产生的强光包含紫外线，长期照射会导致颜料褪色、纸张发黄、纺织品纤维老化等问题。对于古代绘画、古籍、纺织品等光敏感文物尤其有害。'
  },
  {
    title: '文物修复的原则是什么？',
    content: '文物修复遵循"最小干预"原则，即尽可能保留文物的原始状态，只对损坏部分进行必要的修复。修复材料应可识别、可逆转，以便将来可以采用更先进的技术再次修复。'
  },
  {
    title: '如何判断文物的真伪？',
    content: '专业鉴定文物真伪需要综合考虑多方面因素，包括材质、工艺、纹饰、款识、做旧痕迹等。现代科技手段如碳14测年、X射线荧光分析等也是重要的鉴定手段。'
  }
]

const resources = [
  '《中华人民共和国文物保护法》',
  '《北京市文物保护条例》',
  '《博物馆参观礼仪手册》',
  '《文化遗产保护指南》',
  '《世界文化遗产保护公约》'
]

const doList = [
  '遵守参观规定和路线指引',
  '保持安静，不大声喧哗',
  '垃圾放入指定垃圾桶',
  '拍照前确认是否允许拍照',
  '尊重工作人员的提醒和指导',
  '穿着得体，举止文明'
]

const dontList = [
  '触摸文物展品和古建筑构件',
  '在文物上刻字、涂鸦',
  '攀爬文物古迹',
  '使用自拍杆等可能碰撞文物的器具',
  '在禁止拍照区域使用相机',
  '带食物饮料进入展厅'
]
</script>

<style scoped>
.protection-tips-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 32px;
  color: #c62f2f;
  margin-bottom: 10px;
  font-weight: bold;
}

.page-description {
  font-size: 16px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.tips-section {
  margin-bottom: 50px;
}

.main-tips {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tips-card {
  border: none;
  transition: transform 0.3s;
}

.tips-card:hover {
  transform: translateY(-5px);
}

.tip-content {
  display: flex;
  align-items: flex-start;
}

.tip-icon {
  font-size: 36px;
  color: #c62f2f;
  margin-right: 20px;
  flex-shrink: 0;
}

.tip-text h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.tip-text p {
  color: #666;
  line-height: 1.6;
}

.side-card {
  margin-bottom: 30px;
  border: none;
}

.card-header h2 {
  margin: 0;
  font-size: 20px;
  color: #c62f2f;
}

.resource-list {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.resource-list li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #666;
}

.resource-list li .el-icon {
  color: #c62f2f;
  margin-right: 10px;
}

.full-width {
  width: 100%;
}

.beijing-button {
  background-color: #c62f2f;
  border-color: #c62f2f;
  padding: 12px 24px;
  font-size: 16px;
}

.beijing-button:hover {
  background-color: #a52222;
  border-color: #a52222;
}

.section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.do-dont-section {
  margin-bottom: 50px;
}

.do-card,
.dont-card {
  height: 100%;
  border: none;
}

.do-card .card-header h3,
.dont-card .card-header h3 {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin: 0;
}

.do-card .card-header h3 {
  color: #67c23a;
}

.dont-card .card-header h3 {
  color: #f56c6c;
}

.do-card .card-header h3 .el-icon,
.dont-card .card-header h3 .el-icon {
  margin-right: 10px;
}

.do-list,
.dont-list {
  padding-left: 20px;
}

.do-list li,
.dont-list li {
  margin-bottom: 15px;
  color: #666;
  line-height: 1.6;
}
</style>
